import React from 'react';
// import { HashRouter as Router, Route, Switch, Redirect, Link, NavLink, RouterProps} from 'react-router-dom';
import { HashRouter as Router, Route, Switch, Redirect, Link, NavLink, withRouter } from './react-router-dom';
import Home from './components/home'
import About from './components/about'
import Detail from './components/detail'

// function Test(props) {
//     console.log(props);
//     return <div>hhh</div>
// }


// const NewComp = withRouter(Test)
function App(props) {
    const { history } = props;
    return (
        <>
            {/* <NewComp a='11'></NewComp> */}
            <ul>
                <li><NavLink to='/' exact={true} activeStyle={{ color: 'orange' }} style={{}} className='a' activeClassName='aa' >Home</NavLink></li>
                <li><NavLink to="/about/22" activeStyle={{ color: 'red' }}>About</NavLink></li>
                <li><NavLink to="/detail" activeStyle={{ color: 'lightblue' }}>Detail</NavLink></li>
                <li onClick={() => history.goForward()}>前进</li>
                <li onClick={() => history.goBack()}>后退</li>
            </ul>
            {/* Switch只匹配一个， 匹配到了就不再匹配了， 如果不用Swtich的话，匹配全部，不管匹不匹配得到 */}
            {/* 使用Swtich的话，根路径一般要使用exact精确匹配，默认是模糊匹配 */}
            <Switch>
                <Route path='/' exact={true} component={Home}></Route>
                <Route path='/about/:id' component={About}></Route>
                <Route path='/detail' component={Detail}></Route>
                {/* <Route path='/detail/:id' component={Detail}></Route> */}
                {/* 当上面的都没匹配到的话，就转到/ */}
                {/* <Redirect  to='/'></Redirect> */}
            </Switch>
        </>
    )
}

export default withRouter(App);